<template>
  <div class="container-y">
      <div class="bt clearfix">
          <div class="look-less">
              <router-link :to="{ path: '/Syllabus' ,query:{userId:this.$route.query.userId}}">
          查看课程
              </router-link>
          </div>
      </div>
      <div class="photo-box" > 
          <img :src="wechatPortrait" alt="">
      </div>
      <p class="name">{{teachName}}</p>
      <div class="exp">个人经验 : </div>
      <div class="exptext">{{teachRemark}}</div>
      <div class="code-box">
          <img :src="qrCodePath" alt="">
      </div>
      <div class="text-all">
          <p class="text">1.长按二维码或者添加微信号{{weChatCode}}</p>
          <p class="text">2.发送“Hi，my uid is <span class="num">{{verificationCode}}</span>”给外教，
方便老师找到您</p>
      </div>
     <div class="all-box">
         客服电话：400-215-265（13：00-22：00）
     </div>
     <div class="title">
         @易知英语
     </div>
  </div>
</template>
<script>
export default {
  data(){
    return{
          list:"",
          wechatPortrait:"",
          teachName:'',
          teachRemark:"",
          qrCodePath:"",
          verificationCode:"",
          weChatCode:""
    }
  },
  mounted(){
    this.getINformation()
  },
   created(){
     this.userId=this.$route.query.userId

  },
  methods:{
      getINformation(){
           this.$axios.post('http://www.chenyekeji.com/bsti-rbac/wechat/getOrder?userId='+this.$route.query.userId)
          .then((res) => {
              console.log(res)
              this.list=res.data.data
              this.wechatPortrait=this.list[this.$route.query.num].wechatPortrait
              this.teachName=this.list[this.$route.query.num].teachName
              this.weChatCode=this.list[this.$route.query.num].weChatCode
              this.teachRemark=this.list[this.$route.query.num].teachRemark
              this.qrCodePath=this.list[this.$route.query.num].qrCodePath
              this.verificationCode=this.list[this.$route.query.num].verificationCode
          })
          
      },
  }
}
</script>
<style scoped>

.look-less a{
    color: #fff;
}
.all-box{
    padding-top:160px;
    font-size: 24px;
    color: #aaaaaa;
}
.title{
    font-size: 24px;
    color: #aaaaaa;
}
.text-all{
    padding:0 80px;
    color: #666666;
    font-size: 28px;
    line-height: 50px;
    text-align: left;
}
.num{
    color: #ff3434;
}
.code-box{
    padding-top:90px;
    padding-bottom: 50px;
}
.code-box img{
    width:242px;
    height: 242px;
}
.exp{
    padding:0 36px 30px 40px;
    font-size: 32px;
    color:#676767;
    text-align: left;
    position: relative;
}
.exptext{
    padding:0 36px 30px 40px;
    font-size: 28px;
    color:#676767;
    text-align: left;
    position: relative;
}
.exp:before{
    content: "";
    position: absolute;
    left: 14px;
    top: 7px;
    border-radius: 6px;
    width:6px;
    height: 30px;
    background: #ff3434;
}
.name{
    font-size: 34px;
    color: #333333;
    padding-bottom: 60px;
}
  .container-y{
      height:100%;
      width:100%;
      padding:0 20px;
      box-sizing: border-box;
  }
  .look-less{
     width: 162px;
     height:40px;
     line-height: 40px;
     font-size: 28px;
     color: #fff;
     border-radius: 4px;
     background: #ff3434;
     float: right;
     margin-top:46px;
  }
  .photo-box{
      height: 185px;
      padding-bottom:20px;
      display: flex;
      justify-content: center;
  }
   .photo-box img{
       height: 165px;
       width: 165px;
       border: 1px solid #fba7a7;
       border-radius: 100%;
       overflow: hidden;
   }
</style>











